<template>
  <div class="xd-LearningHome-LearingItemHome">
    <el-card
      class="box-card"
      shadow="hover"
    >
      <div
        slot="header"
        class="title"
      >推荐专题</div>
      <div class="course_panel">
        <div
          class="item"
          v-for="(item,index) in recommendList"
          :key="'topic' + index"
          @click="goDetail(item)"
          :style="{marginRight:(index+1)%4===0?'0px':''}"
        >
          <img
            class="cover"
            :src="item.imgUrl"
          />
          <div class="course_body">
            <p
              class="title"
              v-text="item.topicTitle"
            ></p>
            <!-- <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
            <p class="p_top">
              授课人：{{item.curriculumTeacher}}
              <span class="credits_tag">
                学分：
                <span class="text_color_429688">{{item.curriculumPoints}}</span>
              </span>
            </p> -->
          </div>
        </div>
        <p v-if="!recommendList.length">{{NO_DATA}}</p>
      </div>
      <el-pagination
        @size-change="recommendSizeChange"
        @current-change="recommendCurrentChange"
        :current-page="recommendForm.page"
        :page-sizes="[12, 20, 30, 40, 50]"
        :page-size="recommendForm.size"
        :layout="PAGE_LAYOUT"
        :total="recommendForm.total"
        class="m_t_22"
      ></el-pagination>
    </el-card>
    <el-card
      class="box-card"
      shadow="hover"
    >
      <div
        slot="header"
        class="title curriculum-title"
      >
        <span class="deall">全部专题</span>
        <div class="text_size_8">
          <template v-for="(item, idx) in typeList">
            <span
              class="curriculum-type"
              :class="{'cur-active': currentType === item.id}"
              @click="changeType(item.id)"
              :key="item.id"
            >
              {{item.title}}
              <!-- <span
                class="curriculum-space"
                v-if="idx !== typeList.length-1"
              >|</span> -->
            </span>
          </template>
        </div>
      </div>
      <div class="course_panel">
        <div
          class="item"
          v-for="(item,index) in topicList"
          :key="'list' + index"
          @click="goDetail(item)"
          :style="{marginRight:(index+1)%3===0?'0px':''}"
        >
          <img
            class="cover"
            :src="item.imgUrl"
          />
          <div class="course_body">
            <p
              class="title"
              v-text="item.topicTitle"
            ></p>
            <!-- <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
            <p class="p_top">
              授课人：
              <span>{{item.curriculumTeacher}}</span>
              <span class="credits_tag">
                学分：
                <span class="text_color_429688">{{item.curriculumPoints}}</span>
              </span>
            </p> -->
          </div>
        </div>
        <p v-if="!topicList.length">{{NO_DATA}}</p>
      </div>
      <el-pagination
        @size-change="topicSizeChange"
        @current-change="topicCurrentChange"
        :current-page="topicForm.page"
        :page-sizes="[12, 20, 30, 40, 50]"
        :page-size="topicForm.size"
        :layout="PAGE_LAYOUT"
        :total="topicForm.total"
        class="m_t_22"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
const TOPIC_LIST = 'topic/my/list'
export default {
  name: 'SubjectHome',
  data() {
    return {
      typeList: [],
      topicList: [],
      currentType: '',
      recommendList: [],
      topicForm: {
        page: 1,
        size: 12,
        total: 0
      },
      recommendForm: {
        page: 1,
        size: 12,
        total: 0
      }
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/LearningHome/Subject')
    this.fetchTopicType()
    this.fetchRecommendList()
    this.fetchListByType()
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: '/LearningHome/LearningSubject',
        query: {
          tid: item.topicId
        }
      })
    },
    fetchRecommendList() {
      utils.post(TOPIC_LIST, {
        isRecommend: 1,
        pageNumber: this.recommendForm.page,
        pageSize: this.recommendForm.size
      }, res => {
        if (res.success) {
          this.recommendList = res.data.rows
          this.recommendForm.total = res.data.total
        }
      })
    },
    fetchTopicType() {
      utils.post('topic/typeList', {}, res => {
        if (res.success) {
          this.typeList = res.data
        }
      })
    },
    fetchListByType() {
      utils.post(TOPIC_LIST, {
        dicTypeId: this.currentType,
        pageNumber: this.topicForm.page,
        pageSize: this.topicForm.size
      }, res => {
        if (res.success) {
          // this.topicList = res.data.rows.slice(0, 9) ?????
          this.topicList = res.data.rows
          this.topicForm.total = res.data.total
        }
      })
    },
    changeType(tid) {
      this.currentType = tid
      this.fetchListByType()
    },
    topicSizeChange(val) {
      this.topicForm.size = val
      this.fetchListByType()
    },
    topicCurrentChange(val) {
      this.topicForm.page = val
      this.fetchListByType()
    },
    recommendSizeChange(val) {
      this.recommendForm.size = val
      this.fetchRecommendList()
    },
    recommendCurrentChange(val) {
      this.recommendForm.page = val
      this.fetchRecommendList()
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-LearingItemHome {
  padding: 10px;
  padding-left: 0px;
  padding-right: 0px;
  .el-card {
    margin-bottom: 20px;
  }

  .course_panel {
    display: flex;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      width: 200px;
      // height: 170px;
      background-color: #ffffff;
      border-radius: 4px;
      border: solid 1px #e9e9e9;
      margin-right: 7px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      .cover {
        display: block;
        width: 100%;
        height: 130px;
      }

      .course_body {
        padding: 13px 12px;
        color: #666666;
        font-size: 16px;
        text-align: center;

        // p {
        //   display: flex;
        //   align-items: center;
        // }

        .p_top {
          margin-top: 0.45vw;
        }

        .title {
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .credits_tag {
          margin-left: auto;
        }
      }
    }
  }
}
.card-title-cell {
  cursor: pointer;
  margin-right: 1em;
  &.card-unactivated {
    color: #cfcfcf;
  }
}

.curriculum-title {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #333333;
  .text_size_8 {
    font-weight: normal;
    color: #999999;
  }
}
.curriculum-type {
  color: #5e6559;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin: 0 8px;
}
.deall{
  width: 200px;
}
// .curriculum-space {
//   margin: 0 5px;
// }
</style>